<script setup>
import {onLoad} from "@dcloudio/uni-app";
import {nextTick, reactive, ref} from "vue";

let ware = reactive({item: {}})

const swiper = reactive({
  //指示器
  indicatorDots: true,
  //自动播放
  autoplay: true,
  //时间，单位毫秒
  interval: 3000,
  //移动速度
  duration: 500,
})

let imgList = ref([]);

onLoad((option) => {
  ware.item = JSON.parse(option.ware);
  imgList.value = ware.item.img.split("_");
  console.log(ware.item);
  console.log(imgList.value);
})

const baseUrl = "http://118.178.254.102:1253/";

</script>

<template>
  <scroll-view scrool-y="true">
    <view class="item-info">
      <view class="container-box">
        <view class="main-box">
          <view class="main">
            <view class="img-box">
              <view class="uni-margin-wrap">
                <swiper :autoplay="swiper.autoplay" :duration="swiper.duration" :indicator-dots="swiper.indicatorDots"
                        :interval="swiper.interval" circular
                        class="swiper">
                  <swiper-item>
                    <view class="swiper-item"><img :src="baseUrl+imgList[0]" alt="" class="swiper-img">
                    </view>
                  </swiper-item>
                  <swiper-item>
                    <view class="swiper-item"><img :src="baseUrl+imgList[1]" alt="" class="swiper-img">
                    </view>
                  </swiper-item>
                  <swiper-item>
                    <view class="swiper-item"><img :src="baseUrl+imgList[2]" alt="" class="swiper-img">
                    </view>
                  </swiper-item>
                  <swiper-item>
                    <view class="swiper-item"><img :src="baseUrl+imgList[3]" alt="" class="swiper-img">
                    </view>
                  </swiper-item>
                  <swiper-item>
                    <view class="swiper-item"><img :src="baseUrl+imgList[4]" alt="" class="swiper-img">
                    </view>
                  </swiper-item>
                </swiper>
              </view>
            </view>
            <view class="item-info-box">
              <view class="item-info">
                <p class="item-name">商品名称：{{ ware.item.name }}</p>
                <p class="item-type">商品类型：{{ ware.item.type }}</p>
                <p class="item-weight">商品重量：{{ ware.item.weight }}</p>
                <p class="item-sale">已售：{{ ware.item.sales }}</p>
                <p class="item-price">价格：{{ ware.item.price }}</p>
                <p class="item-introduce">商品介绍：{{ ware.item.introduce }}</p>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<style scoped src="../../css/item-info.css">

</style>